<template>
    <div>
      <!-- Breadcrumb navigation with styling -->
      <el-breadcrumb separator="/" class="breadcrumb">
        <el-breadcrumb-item>
          <router-link to="/user/location">党建地点</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>党建地点详细信息</el-breadcrumb-item>
      </el-breadcrumb>
  
      <div class="content">
        <div class="location-detail">
          <!-- Location image -->
          <el-card class="image-card">
            <img :src="locationDetails.photo" alt="Location Image" class="location-image" />
          </el-card>
  
          <div class="location-info">
            <h2>{{ locationDetails.name }}</h2>
            <p><strong>预约人数:</strong> {{ locationDetails.balance }}</p>
            <p><strong>类型:</strong> {{ locationDetails.type }}</p>
          </div>
  
          <div class="location-description">
            <h3>详细信息</h3>
            <p>{{ locationDetails.content }}</p>
          </div>
        </div>
  
        <!-- 推荐位置 -->
        <div class="recommendations">
          <h3>系统推荐</h3>
          <el-row :gutter="20">
            <el-col v-for="location in recommendedLocations" :key="location.id" :span="6">
              <el-card>
                <img :src="location.photo" alt="推荐地点" class="recommendation-image" />
                <div class="recommendation-name">{{ location.name }}</div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { selectByNameService, LocationListService } from '@/api/location.js';
  
  export default {
    data() {
      return {
        locationId: this.$route.params.locationId,
        locationName: this.$route.params.locationName,
        locationDetails: null,
        allLocations: [],
        recommendedLocations: [] // 用来存储推荐的地点
      };
    },
    created() {
      this.fetchLocationDetails();
      this.fetchAllLocations();
    },
    methods: {
      async fetchLocationDetails() {
        try {
          const response = await selectByNameService(this.locationName);
          this.locationDetails = response.data; // 根据实际返回的数据格式调整
          console.log('Location Details:', this.locationDetails);
          console.log('Location Details:', this.locationDetails.photo);
        } catch (error) {
          console.error('Error fetching location details:', error);
        }
      },
  
      async fetchAllLocations() {
        try {
          const response = await LocationListService({ page: 1, size: 10 });
          this.allLocations = response.data.list; // 根据实际返回的数据格式调整
          this.getRecommendedLocations();
          console.log('All Locations:', this.allLocations);
        } catch (error) {
          console.error('Error fetching all locations:', error);
        }
      },
  
      getRecommendedLocations() {
        // Sort locations by number and get the top 4
        const sortedLocations = this.allLocations.sort((a, b) => b.number - a.number);
        this.recommendedLocations = sortedLocations.slice(0, 4);
      }
    }
  };
  </script>
  
  <style scoped>
  .breadcrumb {
    margin-bottom: 20px; /* 左上角面包屑导航的底部间距 */
  }
  
  .content {
    display: flex;
    justify-content: space-between;
  }
  
  .location-detail {
    flex: 1; /* 主体内容区域 */
    margin-right: 20px; /* 主体内容区域与推荐卡片之间的间距 */
  }
  
  .image-card {
    margin-bottom: 20px; /* 位置图片的底部间距 */
  }
  
  .location-image {
    width: 100%; /* 图片宽度自适应 */
    height: auto; /* 高度自适应 */
  }
  
  .location-info {
    margin-top: 10px;
    margin-bottom: 20px; /* 位置信息区域的上下间距 */
  }
  
  .location-description {
    margin-top: 20px; /* 详细信息区域的顶部间距 */
  }
  
  .recommendations {
    width: 300px; /* 推荐区域宽度 */
  }
  
  .recommendation-image {
    width: 100%; /* 推荐卡片图片宽度自适应 */
    height: auto; /* 高度自适应 */
  }
  
  .recommendation-name {
    text-align: center; /* 推荐名称居中 */
    margin-top: 10px;
  }
  </style>
  